/*
leftPanel-box及站点类型切换按钮的样式
*/
.leftPanel {
  position: absolute;
  top: 20px;
  left: 20px;
  bottom: 20px;
  width: 470px;
  transition: all 0.5s;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(4px);
  }

  &.hidePanel {
    transform: translateX(-492px);
  }

  .map_leftPanel {
    border-radius: 4px;
    padding: 8px;
    width: 100%;
    height: 100%;
    position: relative;
    // border: 1px solid #307eff;
    border: 1px solid #ccc;

    // 面板切换按钮
    .toggle {
      position: absolute;
      top: 18px;
      bottom: 0;
      right: -34px;
      width: 34px;
      padding-right: 6px;
      overflow: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0;

      .toggle-btn {
        cursor: pointer;
        text-align: center;
        line-height: 50px;
        border-radius: 0 4px 9px 0;
        height: 50px;
        transform-origin: 0 0;
        transform: skew(-6deg, 0);
      }

      .toggleItem {
        flex: none;
        width: 100%;
        cursor: pointer;
        text-align: center;
        writing-mode: tb;
        position: relative;
        padding: 12px 6px 12px 0;

        &::before {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          content: "";
          border-radius: 0 4px 9px 0;
          // transform-origin: 0 0;
          // transform: skew(-6deg, 0);
          background: #dcdcdc;
        }
        &.active{
          color: #fff;
          &::before{
            background: #409eff;
          }
        }

        &:hover {
          img {
            display: block;
          }
        }

        .toggle-name {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          letter-spacing: 1px;
        }

        img {
          position: absolute;
          // top: -6px;
          // right: -6px;
           top: 0px;
          right: -2px;
          z-index: 0;
          cursor: pointer;
          display: none;
          // transform: skew(8deg, 0deg);
        }
      }
    }
  }
  .SubPage_details  {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
    padding: 8px;
    width: 100%;
    height: 100%;
    position: relative;
    border: 1px solid #307eff;
  > * {
    width: 100% !important;
  }
}

}
